<script setup>
import {onMounted, reactive, ref} from "vue";
import axios from "@/util/axios.js";
import {ElMessage, ElMessageBox} from "element-plus";

const formDataRef = ref(null)
const props = {
  expandTrigger: 'hover',
  value:'id',
  label:'name',
}
const data = reactive({
  tableData: [],
  cascaderData: [],
  total: 0,
  queryParam: {
    page: 1,
    size: 10
  },
  formData: {
    id: undefined,
    name: '',
    code: '',
    path: '',
    component: '',
    type: 'menu',
    orderNum: 10,
    parentId: 0,
  },
  dialogVisible: false,
  dialogTitle: '添加',
  rules: {
    name: [
      {required: true, message: '请输入名称', trigger: 'blur'},
    ],
    code: [
      {required: true, message: '请输入权限', trigger: 'blur'},
    ],
    type: [
      {required: true, message: '请选择类型', trigger: 'blur'},
    ],
    orderNum: [
      {required: true, message: '请输入排序', trigger: 'blur'},
    ],
    parentId:[
        {required: true, message: '请选择父菜单', trigger: 'blur'}
    ]
  }
})
const loadData = () => {
  axios.get('/aclpermission/tree')
      .then(res => {
        data.tableData = res.data.info
      }).catch(e=>{
  })
  axios.get('/aclpermission/cascaderData')
      .then(res => {
        data.cascaderData = []
        data.cascaderData.push({
          name: '根目录',
          id: 0
        })
        data.cascaderData.push( ...res.data.info)

      }).catch(e=>{
  })
}

onMounted(() => {
  loadData()
})
const resetFormData = () => {
  data.formData = {
    id: undefined,
    name: '',
    code: '',
    type: 'menu',
    path: '',
    component: '',
    orderNum: 10,
    parentId: 0,

  }
}
const handlerAddBtn = () => {
  data.dialogVisible = true
  data.dialogTitle = '添加'
  resetFormData()

}

const confirmAdd = () => {
  formDataRef.value.validate(valid => {
    if (valid) {
      data.formData.parentId = data.formData.parentId[data.formData.parentId.length-1]
      if (data.formData.type === 'dir') {
        data.formData.type = 'menu'
      }
      if (data.formData.id){
        axios.put('/aclpermission/edit', data.formData).then(res => {
          data.dialogVisible = false
          ElMessage.success('修改成功')
          loadData()
        })
      } else {
        axios.post('/aclpermission/save', data.formData).then(res => {
          data.dialogVisible = false
          ElMessage.success('添加成功')
          loadData()
        })
      }

    }
  })
}

const handlerDelete = (row) => {
  // 是否确认删除
  ElMessageBox.confirm(
      '是否确认删除?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    // 删除
    axios.delete('/aclpermission/'+row.id).then(res => {
      ElMessage.success('删除成功')
      loadData()
    })
  })
}

const handlerEdit = (row) => {
  data.dialogVisible = true
  data.dialogTitle = '修改'
  data.formData = {...row}
}
</script>

<template>
  <div style="margin-bottom: 10px;">
    <el-button type="primary" @click="handlerAddBtn" v-permission="'aclpermission:add'">添加</el-button>
    <el-button type="success" @click="loadData">刷新</el-button>
  </div>

  <div>
    <el-table
        :data="data.tableData"
        row-key="id"
        border
    >
      <el-table-column prop="name" label="名称"/>
      <el-table-column prop="code" label="权限"/>
      <el-table-column prop="type" label="类型"/>
      <el-table-column prop="path" label="路径"/>
      <el-table-column prop="component" label="组件"/>
      <el-table-column prop="orderNum" label="排序"/>
      <el-table-column prop="" label="操作" :width="300">
        <template #default="scope">
          <el-button type="info" size="small" @click="handlerEdit(scope.row)" v-permission="'aclpermission:edit'">修改</el-button>
          <el-button type="danger" size="small" @click="handlerDelete(scope.row)" v-permission="'aclpermission:delete'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 弹框添加/修改操作 -->
  <el-dialog
      :title="data.dialogTitle"
      v-model="data.dialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
  >
    <el-form :model="data.formData" label-width="80px" :rules="data.rules" ref="formDataRef">
      <el-form-item label="名称" prop="name">
        <el-input type="text" v-model="data.formData.name"/>
      </el-form-item>
      <el-form-item label="权限" v-if="data.formData.type === 'menu'">
        <el-input type="text" v-model="data.formData.code"/>
      </el-form-item>
      <el-form-item label="路径" v-if="data.formData.type === 'menu'">
        <el-input type="text" v-model="data.formData.path"/>
      </el-form-item>
      <el-form-item label="组件" v-if="data.formData.type === 'menu'">
        <el-input type="text" v-model="data.formData.component"/>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <!--  menu|button      -->
        <el-radio-group v-model="data.formData.type">
          <el-radio label="menu" value="menu">菜单</el-radio>
          <el-radio label="button" value="button">按钮</el-radio>
          <el-radio label="dir" value="dir">目录</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--  是否是根目录    -->
      <el-form-item label="父菜单" prop="parentId">
        <el-cascader
            v-model="data.formData.parentId"
            :options="data.cascaderData"
            :props="props"
        />
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input type="number" v-model="data.formData.orderNum"/>
      </el-form-item>

    </el-form>
    <!-- 确认和取消按钮   -->
    <template #footer>
      <el-button @click="data.dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmAdd">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>